<template>
	<!-- 页面整体容器 -->
	<view>
		<!-- 顶部提示信息区域 -->
		<view class="top-prompt">
			<!-- 提示信息文本 -->
			<text>信息仅用于装车信息验证，智运保障您的信息安全</text>
		</view>
		<!-- 驾驶证上传提示区域 -->
		<view class="content">
			<!-- 左侧蓝色竖条 -->
			<view class="box"></view>
			<!-- 提示文本 -->
			<view class="photo"><text>请上传空车重量图片</text></view>
		</view>
		<view class="upload-btn" @click="uploadPhoto1">
			<view v-if="!photo1" class="upload-icon-wrapper">
				<view class="upload-icon2">
					<image src="/photo/driver-autnentication/camera-upload.png" style="width: 50rpx; height: 50rpx;">
					</image>
				</view>
				<text class="upload-text">上传空车重量图片</text>
			</view>
			<view class="upload-btn uploaded" v-else>
				<image :src="photo1" class="upload-icon" />
				<view class="close-btn" @click.stop="removePhoto1">×</view>
			</view>
		</view>
		<!-- 驾驶证上传提示区域 -->
		<view class="content">
			<!-- 左侧蓝色竖条 -->
			<view class="box"></view>
			<!-- 提示文本 -->
			<view class="photo"><text>请上传装车重量图片</text></view>
		</view>
		<view class="upload-btn" @click="uploadPhoto2">
			<view v-if="!photo2" class="upload-icon-wrapper">
				<view class="upload-icon2">
					<image src="/photo/driver-autnentication/camera-upload.png" style="width: 50rpx; height: 50rpx;">
					</image>
				</view>
				<text class="upload-text">上传装车重量图片</text>
			</view>
			<view class="upload-btn uploaded" v-else>
				<image :src="photo2" class="upload-icon" />
				<view class="close-btn" @click.stop="removePhoto2">×</view>
			</view>
		</view>
    <view class="form-item">
      <label>装货数量</label>
      <view class="input-wrapper">
        <input class="no-border-input" type="text" v-model="originalData.actualsum" placeholder="请输入12~49"
               required />
        <text>吨</text>
      </view>
    </view>

		<!-- 提交审核按钮，点击触发提交审核事件 -->
		<button class="submit-btn" @click="submitReview">提交审核</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		tokenStore
	} from '@/stores/token';
	//存放用户信息的容器
	import {
		userStore
	} from '@/stores/user';
	//引入拦截器
	import '@/config/requst.js'
	import {
		http
	} from '@/config/requst.js';
  import {
    onLoad,
    onShow
  } from '@dcloudio/uni-app';
	// 使用 ref 存储上传的图片路径
	const photo1 = ref(null);
	const photo2 = ref(null);
	const formData = ref({
		did: '',
		driveimg1: '',
		driveimg2: ''
	})
  const originalData = ref({});

	// 上传装车图片1
	const uploadPhoto1 = () => {
		wx.chooseImage({
			count: 1,
			success(res) {
				photo1.value = res.tempFilePaths[0]; // 获取并存储图片1路径
				console.log("上传装车图片1", res);
				uni.uploadFile({
					url: 'http://192.168.0.31:8080/drive/upload', // 请确保这是正确的后端地址
					filePath: photo1.value, // 文件路径
					name: 'file', // 文件字段名
					formData: {
						'user': 'test' // 表单数据
					},
					header: {
						'Authorization': tokenStore().token // 携带token
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data); // 打印上传成功返回的数据
						let i = JSON.parse(uploadFileRes.data);
            console.log(i)
            originalData.value.emptyimg = i.shuju;
					},
					fail: (err) => {
						console.error('上传失败:', err); // 打印上传失败错误信息
					}
				});
			},
			fail(err) {
				console.log("上传装车图片1失败", err);
			}
		});
	};

	// 删除装车图片1
	const removePhoto1 = () => {
		photo1.value = null;
	};

	// 上传装车图片2
	const uploadPhoto2 = () => {
		wx.chooseImage({
			count: 1,
			success(res) {
				photo2.value = res.tempFilePaths[0]; // 获取并存储图片2路径
				console.log("上传装车图片2", res);
				uni.uploadFile({
					url: 'http://192.168.0.31:8080/drive/upload', // 请确保这是正确的后端地址
					filePath: photo2.value, // 文件路径
					name: 'file', // 文件字段名
					formData: {
						'user': 'test' // 表单数据
					},
					header: {
						'Authorization': tokenStore().token // 携带token
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data); // 打印上传成功返回的数据
						let i = JSON.parse(uploadFileRes.data);
            console.log(i)
            originalData.value.loadingimg = i.shuju;
					},
					fail: (err) => {
						console.error('上传失败:', err); // 打印上传失败错误信息
					}
				});
			},
			fail(err) {
				console.log("上传装车图片2失败", err);
			}
		});
	};

	// 删除装车图片2
	const removePhoto2 = () => {
		photo2.value = null;
	};

	// 提交审核的方法
	const submitReview = () => {
		// 校验图片路径变量是否为空
		if (!photo1.value || !photo2.value) {
      uni.showToast({
        title: '请上传所有需要的图片',
        duration: 2000,
        icon: 'none'
      });
			console.log('请上传所有需要的图片');
			return;
		}
    if (originalData.value.actualsum>42  || originalData.value.actualsum<12) {
      uni.showToast({
        title: '请输入合适的吨数',
        duration: 2000,
        icon: 'none'
      });
    }
		// 调用提交审核的方法
		tj();
	};

	//提交审核
	const tj = async () => {
    console.log(originalData.value)
		const res = await http({
			method: 'post',
			url: '/orders/upload',
			data: originalData.value
		})
		if (res.code == 20031) {
			uni.showToast({
				title: '提交成功',
				icon: 'success',
				duration: 2000
			});
      setTimeout(() => {
        uni.switchTab({
          url:'/pages/transport/transport'
        })
      }, 2000);
    } else {
			uni.showToast({
				title: '提交失败',
				icon: 'error',
				duration: 2000
			});
		}
	}
  onLoad((obj) => {
    //当首次进入页面的时候，将用户的id和这个商品的id存放变量car中
    originalData.value.id = obj.id
    console.log(originalData.value)
  })
</script>

<style lang="scss" scoped>
	/* 顶部提示信息样式 */
	.top-prompt {
		width: 700rpx;
		height: 80rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 10rpx auto;
		border-radius: 15rpx;
		background-color: #708ac2;
		color: white;
	}

	/* 上传提示区域样式 */
	.content {
		display: flex;
		align-items: center;
		margin-top: 50rpx;

		/* 左侧蓝色竖条样式 */
		.box {
			width: 10rpx;
			height: 50rpx;
			background-color: #073496;
			border-radius: 20rpx;
			margin-left: 20rpx;
		}

		/* 提示文本样式 */
		.photo {
			line-height: 50rpx;
			margin-left: 10rpx;
		}
	}

	.file-upload {
		display: flex;
		justify-content: space-around;
	}

	.upload-btn {
		margin: 20rpx;
		width: 43%;
		height: 180rpx;
		background-color: #f1f1f1;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
	}

	.upload-icon-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
		position: relative;
	}

	.upload-text {
		font-size: 24rpx;
		color: #868686;
	}

	.upload-icon {
		width: 300rpx;
		height: 300rpx;
		background-size: cover;
		/* 保证图片完全覆盖框，并保持长宽比 */
		border-radius: 10rpx;
	}

	.uploaded {
		position: relative;
	}

	.close-btn {
		position: absolute;
		top: 5rpx;
		right: -60rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 28rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
	}

	/* 提交审核按钮样式 */
	.submit-btn {
		background-color: #5a98ff;
		color: white;
		padding: 15rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		margin: 100rpx auto;
		display: block;
		width: 80%;
	}

  .form-item {
    /* 设置表单项距离手机边框的左外边距 */
    margin-left: 20rpx;
    /* 使用 flex 布局，使表单标签和输入框水平排列并垂直居中 */
    display: flex;
    align-items: center;
    /* 设置表单项之间的底部外边距 */
    margin-bottom: 15rpx;
    //视图容器底部边框  提高可视性
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 10rpx;
  }

  .form-item label {
    /* 设置表单标签的宽度 */
    width: 150rpx;
  }

  .input-wrapper {
    /* 使用 flex 布局，使输入框和图标水平排列并垂直居中 */
    display: flex;
    align-items: center;
    /* 使输入框和图标在容器内均匀分布 */
    justify-content: space-around;
  }
</style>